Designers and developers often think differently and unless we have a process for managing these differences, we will fail to properly collaborate and fall short on our product goals. In this article, we’ll explore the tools and processes needed for collaboration between design and development teams in order to build the best products possible.
As a development partner for some of the most creative design & marketing agencies in the world, we’ve seen countless methods for handing off design assets. It’s important to note that we can accommodate almost any method of handoff. Ultimately, our goal is to become our partners’ most valuable asset and sometimes this means being flexible and fitting into their existing processes. In fact, some of our partners rely on our development team’s ability to design and build:
- Hover states and animations that match their designs.
- Mobile screens that match the aesthetics of their desktop screen designs.
- 404 pages, Thank You pages, and other edge case screens.
While we prefer these are included in the design handoff, often these are the details that easily go overlooked for design teams. That’s why we’ve created this article. We’ve outlined exactly what we define as the perfect handoff, what tools are needed, and what needs to be included. We recommend you use this as a benchmark for how to hand off designs to us or your own development team. At the bottom is a checklist that you can use for each project moving forward. Let’s get into it.
Design File
Our preferred design platform is Sketch as it has numerous integrations and is generally considered the industry leader for product design. Adobe XD and Figma are great platforms and are quickly rising in the ranks, but for now, Sketch still has the thrown.
Prototype
Once all of the screen designs are complete, they should then be synced to a prototyping software. Our preferred tool is Invision. Invision Craft and Inspect allow designers to effortlessly sync all artboards directly from Sketch to Invision. This also allows the development team to inspect the mockups for exact padding information, fonts, sizing, line height, and kerning. This is huge. UI/UX designers spend a considerable amount of time thinking about the smallest of details. They’ve spent hours working on and looking at their designs—same with their client likely—so it’s critical for the development team to achieve pixel perfection. This allows the QA engineers to check the development against the design and ensure the end result is pixel perfect.
Another great thing about Invision is that the designer can add ‘Dev Notes’ to the mockups. For example, say the designer wants to emulate the hamburger menu animation from another website. They can simply add the website link as a Dev Note right on top of the hamburger menu. They can explain exactly what aspects of the animation they like in an explainer screencast video.
Screencast Video
Including a screencast video in your design handoff can be very helpful for developers. We recommend using Loom or VidYard. Both of them have a Chrome extension that makes it easy to quickly record screencast videos. You can easily sync the video to the cloud and include a link in your handoff documentation. We recommend timestamping the various topics that are explained in the video. This way, the development team can easily rewatch the video and reference your designer’s instructions.
Sitemap
This is important for understanding the navigation and SEO. A simple hierarchical bulleted list will suffice. However, if there are 301 redirects, we suggest managing everything in a Google Sheet.
Mobile Screens, Hover States, & Edge-cases
Determining the hover state effects is often overlooked in design handoffs. Although a talented development team can step in to determine hover states, it’s best to be defined by the designer. This includes mobile screens, edge-cases, and various state designs. These are critical for communicating how the website or app should behave.
Below is a checklist that your design team should review before each handoff.
Design Handoff Checklist:
- Mockups: Are all screen mockups included?
- Design file: Is the design file included?
- Sitemap: Is a hierarchical list of pages or an XML document included?
- Server credentials: Are the login credentials for hosting/domain included?
- Project timeline: Are timeline expectations defined and documented?
- Consistent naming conventions: Do the file/screen names contain consistent descriptors of their page name and state?
- Animations: Are all animation intentions defined and documented?
- Hover states: Are all hover states defined and documented?
- Edge cases / alternate designs: Are all edge cases / alternate screen states designed?
- Images: Are all the images and graphics exported or synced through Invision?
- Fonts: Are all font files included?
- Instructional video: Is there a screencast video included?
Other helpful tips for ensuring a smooth transition from design to development:
- Bring development into the strategy conversation early
- Provide scenarios for the development team to test their work
- Document specific goals such as load time benchmarks
- Consider creating specific social media metadata designs
Conclusion
The design handoff is a critical step in every project. With so much effort invested into design and strategy, we believe your design handoff should match this level of quality and detail. This is what makes all the difference in the end product and the process for how we get there.